<template>
  <div>
    <t-button size="small" @click="OnClick">
      <template #icon>
        <BrowseIcon/>
      </template>
      菜单权限
    </t-button>

    <t-drawer v-model:visible="data.show" :header="`用户【${props.user_id}】的菜单权限（角色 ${props.id}）`"
              :closeOnOverlayClick="false"
              :on-confirm="handleConfirm" @close="handleClose" size="large" destroy-on-close confirmBtn="关闭">
      <div>
        <template v-if="data.allMenuDir.length === 0">
          <h1>该权限角色，无任何菜单权限。</h1>
        </template>
        <template v-else>
          <t-collapse defaultExpandAll>
            <template v-for="it in data.allMenuDir">
              <t-collapse-panel :header="it.label">
                <t-list :split="true" size="small">
                  <template v-for="item in it.items">
                    <t-list-item>
                      <t-list-item-meta :title="item.label">
                        <template #description>
                          <t-space>
                            <t-tag size="small" theme="primary">{{ item.id }}</t-tag>
                            <t-tag size="small" theme="success">{{ it.path + "_" + item.path }}</t-tag>
                            <t-tag size="small" theme="success">{{ item.title }}</t-tag>
                          </t-space>
                        </template>
                        <template #image>
                          <div class="r-fx-row-c" style="height: 100%;">
                            <t-icon :name="item.icon" style="font-size: 2em"/>
                          </div>
                        </template>
                      </t-list-item-meta>
                    </t-list-item>
                  </template>
                </t-list>
              </t-collapse-panel>
            </template>
          </t-collapse>
        </template>
      </div>
    </t-drawer>
  </div>
</template>
<script lang="ts" setup>
import {BrowseIcon} from "tdesign-icons-vue-next";
import {reactive} from "vue";
import api from "../../../../api/api";
import {MenuDir} from "../../../../tool/types";

const props = defineProps(['id', 'user_id'])
const data = reactive({
  show: false,
  allMenuDir: new Array<MenuDir>(),
})

const OnClick = async () => {
  data.show = true
  data.allMenuDir = new Array<MenuDir>()
  let res = await api.Admin.User.GetRoleMenuList({
    id: Number(props.id) || 0,
  })
  if (res != null) {
    data.allMenuDir = res.data
  }
}

const handleClose = () => {
  data.show = false
}

const handleConfirm = async () => {
  data.show = false
}
</script>